嗨大家今天過得好嗎？提升使用者體驗的方式有很多種，例如提供更多主題讓使用者選擇，你可以新增 Dark theme！擔心 App 背景太亮造成使用者眼睛負擔？為了讓使用者眼睛更舒服，就可以在你的 App 中瀏覽的時間更加長，你可以新增 Dark theme！App 的色彩充滿衝突表現手法，缺乏系統性管理導致每次都要再三確認色碼，你可以新增 Dark theme！綜合上述這麼多好處，今天就來聊聊如何在專案中新增這麼潮的 Dark theme 功能。

事前整理

Dark theme 的實現方式就是在深色和淺色模式分別對應到不同的色碼，也就是同一個 color id 會對應到兩個顏色，因此在正式實作前就要先確認所有色碼都有放到 res/values/colors.xml 裡面統一管理而不是 hard core 散落在畫面各處，這個步驟最麻煩但也最重要，如果沒有確實收集好所有顏色，切換到深色模式就會有些落漆，有部分的顏色還是淺色的設定。管理不同顏色就是在 src/main/res/ 的路徑下新增 /values-night/ 的資料夾，在裡面新增對應到深色模式的 colors.xml 檔案就完成顏色的整理了！除了顏色之外如果圖片有分深淺色模式，也適用一樣的邏輯同一個 drawable id 會對應到兩張圖片，再把深色模式的圖片新增到 /drawable-night/ 的資料夾底下就好。

完成顏色的整理後還是沒有 Dark theme，因為只有一個主題 style.xml 的檔案，對系統來說還是只有一個主題只會載入預設的 colors.xml，因此要在 /values-night/ 也新增一個 style.xml，把淺色模式的 style.xml 設定貼到深色模式的檔案內，並針對部分在 style 內指定的顏色進行微調，例如 android:textColorPrimary 、colorPrimary 和 colorAccent 要調整成深色主題的設定。

大功告成，只差最後一步去更換系統的主題了！因為要切換不同主題 Context 也不同，意味著需要重建 Activity 才能套用新的主題，因為要在任何使用到 src/main/res/ 的資源前就先指定要套用哪個模式的主題。那系統是如何分辨目前使用的模式呢？分為下列幾種：

• 淺色模式：[MODE_NIGHT_NO](https://developer.android.com/reference/androidx/appcompat/app/AppCompatDelegate.html#MODE_NIGHT_NO)
• 深色模式：[MODE_NIGHT_YES](https://developer.android.com/reference/androidx/appcompat/app/AppCompatDelegate.html#MODE_NIGHT_YES)
• 預設模式：[MODE_NIGHT_FOLLOW_SYSTEM](https://developer.android.com/reference/androidx/appcompat/app/AppCompatDelegate.html#MODE_NIGHT_FOLLOW_SYSTEM) ( Android 10 以後可以在系統設定 )
• 省電模式：MODE_NIGHT_AUTO_BATTERY ( 依據當前電池電力決定 )
• 日落模式：MODE_NIGHT_AUTO_TIME & [MODE_NIGHT_AUTO](https://developer.android.com/reference/androidx/appcompat/app/AppCompatDelegate.html#MODE_NIGHT_AUTO) ( 依據日出日落時間設定，在 ******v1.1.0-alpha03 的版本後 Deprecated 不再支援 )

切換深色模式的方式就是透過 AppCompatDelegate.setDefaultNightMode 的 API 去指定要使用哪個主題，範例如下：

class MyActivity : Activity() {
    public override fun onCreate(icicle: Bundle) {
        super.onCreate(icicle)
        AppCompatDelegate.setDefaultNightMode(
                AppCompatDelegate.MODE_NIGHT_YES)
    }
}

恭喜！走到這一步我們終於完成了 Dark theme 的設定！

掉漆的 Dark theme

深色模式的功能上線幾天後，PM 跟你回報一個 bug 是開啟 WebView 後 Dark theme 的顏色會掉色成淺色模式的顏色，而且還是部分掉色也不是全部，App 好像穿上醜毛衣一樣尷尬得要發芬了！原來兇手就是 WebView 會重設 Activity 的 configuration，前面設定過的主題都不是你的主題，開啟 WebView 之後 inflate View 就會出現套用錯誤 theme 的問題。

解決方式是 androidx.appcompat 的版本要升級到 Version 1.1.0-alpha03 ，change log 有提到 修復 WebView 重設 Confuguration 的問題。咦？那使用 support library 的專案不就只能轉移到 androidX？是的！目前官方的解法也只提供升版本的方式，其他解法看起來都會留下髒髒的 legacy code ( 心好累 )，只能升級啦！哪次不升？

其實套用 Dark theme 不麻煩只要幾行程式碼就解決，麻煩的是事前作業需要把專案經過一番整理，藉此也提醒自己不要逞一時之快就直接 hard core 不把色碼加到 color.xml 裡面，別忘記出來混還是要還的，以前的怕麻煩可以讓以後變得好麻煩，與大家共勉之！

喜歡今天分享內容的邦友請繼續關注「打造一個厲害的普通 Android App - 使用者體驗優化」的主題，我們明天見。